<template>
	<div>
		<!--商品列表--> <!-- :class="{delMagin: !flag}"-->
        <div class="zxGoodsListBox" @click.stop="goInfomation">
            <div class="goodsListTop" v-if="!confirmOrderFood">
                <div class="goodsListTopLeft"></div>
                <div class="goodsListTopName">{{ storeName }}</div>
                <div class="goodsListTopLeft"></div>
            </div>
            <div style="height:2.5rem;line-height:2.5rem;" v-if="confirmOrderFood">
                <p style="position:relative;text-align:left;">
                    <i class="icon njfont nj-shijian" style="color:#38B035;font-size: 0.74rem;display: inline-block;"></i>
                    <span class="cor_tishi" style="display: inline-block;color:#433b3b;">下单后立即制作，最快出餐等待排队人数{{getConfrimOrderRes.data?getConfrimOrderRes.data.data[1]:0}}人</span>
                    <!-- 下单后立即制作，最快5分钟可出餐 -->
                </p>
            </div>
            <!-- 出现滑动卡顿时需要去掉aui-content 解决滑动卡顿问题 class="aui-content choose_list" -->
            <div class="aui-content choose_list" style="margin:0;"  @click.stop="goInfomation" v-if="true">
                <ul class="aui-list aui-media-list" style="background:#f5f5f5;overflow-x:auto;-webkit-overflow-scrolling: touch;">
                    <!-- <li class="aui-list-item iscroll_list"> -->
                    <div class="hzh" style="display: flex;width: fit-content;-webkit-overflow-scrolling: touch;">
                        <div class="aui-list-item-media" style="width: 4.3rem;height: 4.3rem;" v-for="(item,index) in cartList" :key="index" v-if="checkedCartList && checkedCartList.length">
                            <!--<img v-lazy="goodsImg(item) || 'static/image/demo1.png'" style="height: 100%;"/>--> 
                            <!-- buyType  1 代表所买的商品   2代表加购商品  3代表赠品 -->
                            <div class="goodsTopShow" v-if="item.buyType == 2 || item.buyType == 3" :class="{goodsTopShowBackY:item.buyType == 2,goodsTopShowBackR:item.buyType == 3}">
                                {{item.buyType == 2?'加价购':'赠品'}}
                            </div>
                            <img v-lazy="item.goodsImg  || goodsImg(item) || 'static/image/demo2.png'" style="height: 100%;"/> 
                            <em style="background:#EF5423;opacity: 0.6;">x{{item.goodsType == 7?'1':item.goodsNum}}</em>
                        </div>	
                        <!--为了让用户能看到最后一个盒子-->
                        <div class="aui-list-item-media" >
                            
                        </div>	
                    </div>
                    <!-- </li> -->
                </ul>
                <div class="aui-list-item-arrow zxStatistics">
                    <div style="margin-top: 0.4rem;" v-if="!confirmOrderFood">
                            <p>共<span id="co_totalPiece">{{num}}</span>件</p>
                            <p id="co_totalPackage">{{allFlag?'2个包裹':'1个包裹'}}</p>
                    </div>
                    <div style="margin-top: 1.1rem;" v-if="confirmOrderFood">
                            <p>共<span id="co_totalPiece">{{num}}</span>道菜</p>
                            <!-- <p id="co_totalPackage">{{allFlag?'2个包裹':'1个包裹'}}</p> -->
                    </div>
                </div>
            </div>
            <div class="goodsListBottom">
                <div>
                    合计 ：<span style="font-weight:bold;">¥{{goodsMoney.toFixed(2)}}</span>
                </div>
            </div>
        </div>
        <div class="aui-content choose_list"  @click="goInfomation" v-if="false">
            <ul class="aui-list aui-media-list" style="background:#f5f5f5;">
                <li class="aui-list-item iscroll_list">
                    <div id="co_orderGoods" class="aui-media-list-item-inner scroller_list">
						<div class="aui-list-item-media" v-for="(item,index) in cartList" :key="index" v-if="checkedCartList && checkedCartList.length">
							<!--<img :src="goodsImg(item) || 'static/image/demo1.png'" style="height: 100%;"/>--> 
							<img v-lazy="goodsImg(item)  || 'static/image/demo2.png'" style="height: 100%;"/> 
							<em style="background:#EF5423;opacity: 0.6;">x{{item.goodsType == 7?'1':item.goodsNum}}</em>
						</div>	
						<!--为了让用户能看到最后一个盒子-->
						<div class="aui-list-item-media" >
							
						</div>	
                    </div>
                </li>
            </ul>
            <div class="aui-list-item-arrow statistics" style="height:5.1rem;">
               <div style="margin-top: 0.4rem;">
               		<p>共<span id="co_totalPiece">{{num}}</span>件</p>
                	<p id="co_totalPackage">{{allFlag?'2个包裹':'1个包裹'}}</p>
               </div>
            </div>
        </div>
       
        <!--商品列表 end-->
	</div>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex';
	export default {
		props: {
           checkedCartList:{
           		type:Array,
           		default:function(){
           			let arr = [];
           			return arr
           		}
           },
           flag:{
	           	type:Boolean,
	           	default:function(){
	           		return true
	           	}
           },
           checkedCartListNormal: {
           		type:Array,
           		default:function(){
           			let arr = [];
           			return arr
           		}
           },
           checkedCartListBig: {
           		type:Array,
           		default:function(){
           			let arr = [];
           			return arr
           		}
           },
           goodsMoney:{
               type:[String,Number],
               default:0
           },
           confirmOrderFood:{//判断是否是堂食订单的标志
	           	type:[String,Boolean],
	           	default:function(){
	           		return false
	           	}
           },
//         delFlag:{
//         		type:Number,
//         		default:0
//         }
        },
        computed:{
        	...mapGetters('cjy', [
				"selectGiftList", "selectLadderList", "buyMoreData"
			]),
			...mapGetters('zx', [
				"getGiftSendArr","getConfrimOrderRes"
            ]),
            ...mapGetters('qxz',[
                "getStoreList"
            ])
        },
        watch:{
        	checkedCartList(newVal,oldVal){
                // console.log(newVal,oldVal,'购物车数据来了********')
                this.cartList = this.checkedCartList;
                this.getGoodsNum();
                
                if(this.checkedCartListNormal.length && this.checkedCartListBig.length){
                    this.allFlag = true;
                }
            }
        },
        data () {
            return {
               cartList:[],
               num:null,
               money:null,
               allFlag:false,
               storeName:'',
            }
        },
        methods: {
            getStoreName(){
                let arr = this.getStoreList;
                let storeCode = localStorage.getItem('storeCode');
                arr && arr.length && arr.map(ele => {
                    ele.storeCode == storeCode && (this.storeName = ele.storeName);
                })
                !arr.length && (this.storeName = localStorage.getItem('storeName'));
            },
        	goInfomation(){
                console.log("++++++++9999++++++++++++")
        		var obj = {};
        		obj.flag = this.allFlag;
        		if(this.flag){
        			obj.type = "常规配送";
        		}else{
        			obj.type = "大件配送";
        		}
        		var arr = [];
        		arr.push(this.checkedCartListNormal);
        		arr.push(this.checkedCartListBig);
                this.$router.push({path:'orderInformation',query:{arr:arr,obj:obj,confirmOrderFood:this.confirmOrderFood}});
                
        	},
        	goodsImg(goodsItemData) {
	            if (goodsItemData && goodsItemData.urllist) {
	                if(goodsItemData.urllist.length) {
	                	for(let i = 0 ; i < goodsItemData.urllist.length; i++){
	                		if(goodsItemData.urllist[i].Imgurltype == 1){
	                			return goodsItemData.urllist[i].imgurl || "static/image/demo2.png";
	                		}
	                	}
	                } else {
	                    return "static/image/demo2.png";
	                }
	            } else {
	                return "static/image/demo2.png";
	            }
	        },
	        getGoodsNum() {
                this.num = 0;
	        	if(this.cartList.length != 0){
	        		for(let i = 0 ; i < this.cartList.length; i++){
//						6 称重按只   7 称重散装
		            	if(this.cartList[i].goodsType == 7){
							this.num += 1
						}else{
							this.num += this.cartList[i].goodsNum;
						}
		            }
	        	}
	           
	        },
	        eventListen(){
	        	// console.log(22)
	        	var co_orderGoods = document.getElementById('co_orderGoods');
	        	co_orderGoods.addEventListener('scroll', function(e) {
	        		// console.log(co_orderGoods.scrollLeft )
//	        		console.log(screen.width,'screen')	
//	        		if(screen.width == co_orderGoods.scrollLeft){
	        			// console.log("拉到底了")
//	        		}
	        	})
            },
            changeStyle(){
                let heights = window.innerHeight;
                // console.log("////////////////////////////////////////////////////////////////",heights,document.querySelector(".cor_tishi"))
                if(this.confirmOrderFood){
                    if(heights < 667 ){
                        document.querySelector(".cor_tishi").style.fontSize = "0.6rem";
                    }else{
                        document.querySelector(".cor_tishi").style.fontSize = "0.7rem";
                    }
                }
                
            }
	        
        },
        mounted(){
			this.changeStyle()
        },
        created(){
        	this.getStoreName();
        	console.log(this.cartList,'this.cartList传过来的数据');
        },
        updated(){
            // await this.changeStyle()
            
        },
	}
</script>

<style scoped="scoped">
    /* 新增样式 */
    .zxGoodsListBox {
        width:100%;
        background: #fff;
        min-height: 20vh;
        margin-bottom: 0.75rem;
        padding: 0 0.75rem;
    }
    .goodsListTop {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 2.5rem;
        font-size: 16px;
    }
    .goodsListTopLeft {
        height: 0.15rem;
        border: 0;
        background: #fff;
        border-top:1px solid #e8e8e8;
        border-Bottom:1px solid #e8e8e8;
        width: 4.5rem;
    }
    .goodsListBottom {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 2.3rem;
        padding-right: 0.75rem;
    }
    .xiabiao{
        position: absolute;
        right: 0;
        bottom: 0.5rem;
        background: rgba(0, 0, 0, 0.3);
        color: #ffffff;
        padding: 0 0.1rem;
    }
    .packageRight {
        position: absolute;
        width: 4.3rem;
        right: 0;
        top: 0;
        display: flex;
        height: 5.3rem;
        padding-left: 0.3rem;
        align-items: center;
        background: #f5f5f5;
        opacity: 0.7;
    }
    .packageRight::before {
        content: '';
        width: .4rem;
        height: .4rem;
        position: absolute;
        top: 50%;
        right: .75rem;
        margin-top: -.2rem;
        background: 0 0;
        border: 1px solid #ddd;
        border-top: none;
        border-right: none;
        z-index: 2;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }
    .zxStatistics{
        position: absolute;
        top: 0.4rem;
        right: 0;
        bottom: 0;
        z-index: 99;
        width: 4.3rem;
        background: #f5f5f5;
        opacity: 0.9;
        text-align: center;
        padding-top: 1rem;
        text-indent: -1rem;
        transform: translate(0px, 0px) translateZ(0px)
    }
    /* 新增样式 */
	.settle_accounts {
	    height: 3rem;
	    background: rgba(255, 255, 255, 0.9);
	    overflow: hidden;
	    position: fixed;
	    width: 100%;
	    left: 0;
	    bottom: -1px;
	    display: table;
	    border-top: 1px solid #eaeaea;
	    z-index: 1;
	}
	.scroller_list {
        overflow-y: auto;
    }
   	.iscroll_list {
	    height: 5.5rem !important;
	}
	.delMagin{
		margin-bottom: 0;
	}
	.scroller_list{
		position: relative;
	}
	.server_show::after{
		border: 0px solid;
	}
    .goodsTopShow{
        opacity: 0.6;
        position: absolute;
        left: 0;top: 0;
        color: #ffffff;
        padding: 0 0.1rem;
        font-size:12px;
    }
    .goodsTopShowBackY{
        background:#faa73c;
    }
    .goodsTopShowBackR{
        background: #EF5423;
    }
</style>